<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="网易严选,严选,网易优选,网易甄选,网易优品,网易精选,甄选家,严选态度" />
  <meta name="description" content="网易严选秉承网易一贯的严谨态度，深入世界各地，严格把关所有商品的产地、工艺、原材料，甄选居家、厨房、饮食等各类商品，力求给你最优质的商品。" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易严选 - 以严谨的态度，为中国消费者甄选天下优品</title>
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
  <!-- 公共样式CSS -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- 首页样式 -->
  <link rel="stylesheet" href="./css/detail.css">
</head>

<body>
  <header id="header">
    <!-- 头,顶部 start -->
    <div class="header">
      <div class="center">
        <div class="left">
          <a href="#">
            因事件（疫情、特大暴雨）影响，部分地区无法配送公告
          </a>
        </div>
        <div class="right">
          <ul>
            <li id="isLogin"> </li>
            <li> <a href="#">我的订单</a></li>
            <li> <a href="#">会员</a></li>
            <li> <a href="#">甄选家</a></li>
            <li class="dropMeun">
              <a href="#" class="iconfont">企业采购 &#xe61b</a>
              <ul>
                <li><a href="#">企业购</a></li>
                <li><a href="#">礼品卡</a></li>
                <li><a href="#">联系我们</a></li>
              </ul>
            </li>
            <li class="dropMeun">
              <a href="#" class="iconfont">客户服务 &#xe61b</a>
              <ul>
                <li><a href="#">在线客服</a></li>
                <li><a href="#">帮助中心</a></a></li>
                <li><a href="#">商务合作</a></li>
                <li><a href="#">开放平台</a></li>
              </ul>
            </li>
            <li>
              <a href="#" class="iconfont">&#xe612 APP</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 头,顶部 end -->

    <!-- 头, 搜索区域 start -->
    <div class="search">
      <div class="center">
        <div class="logo">
          <a href="#">网易严选</a>
        </div>
        <div class="search-btn">
          <div class="top">
            <input type="text" autocomplete="off" maxlength="100">
            <span>搜索</span>
            <i></i>
          </div>
          <div class="bottom">
            <a href="#">胶囊浓缩咖啡液</a>
            <a href="#">辉天安神补脑液</a>
          </div>
        </div>
        <a class="cart" href="./cart.html">
          <i class="gwc"></i>
          <span class="text">购物车</span>
          <!-- <i class="circle">0</i> -->
        </a>


      </div>
    </div>
    <!-- 头, 搜索区域 end -->

    <!-- 头, nav区域 start-->
    <ul class="nav center">
      <li><a href="#" class="current">首页</a></li>
      <li><a href="#">居家生活</a></li>
      <li><a href="#">服饰鞋包</a></li>
      <li><a href="#">美食酒水</a></li>
      <li><a href="#">个护清洁</a></li>
      <li><a href="#">母婴亲子</a></li>
      <li><a href="#">运动旅行</a></li>
      <li><a href="#">数码家电</a></li>
      <li><a href="#">严选全球</a></li>
      <li><a href="#">为你推荐</a></li>
      <li><a href="#">众筹</a></li>
    </ul>
    <!-- 头, nav区域 end-->
  </header>

  <!-- 商品详情 -->
  <div class="m-detail">
    <div class="center">

      <div class="m-crumb">
        <span>
          <a href="#">首页</a>
          <i class="iconfont">&#xe621;</i>
        </span>
        <span>
          <a href="#">美食酒水</a>
          <i class="iconfont">&#xe621;</i>
        </span>
        <span>
          <a href="#">全球美食</a>
          <i class="iconfont">&#xe621;</i>
        </span>
        <span>
          <a href="#">日本制造 隅田川意式手冲特浓挂耳咖啡</a>
          <!-- <i class="iconfont">&#xe621;</i> -->
        </span>

      </div>

      <div class="detailHD">
        <div class="m-slide">
          <!-- 放大镜 -->
          <div id="zoom">
            <div class="big">
              <img src="" alt="">
            </div>
            <div class="middle">
              <img src="" alt="">
              <div class="mask"></div>
            </div>
            <div class="small">
              <ul></ul>
            </div>

          </div>
        </div>
        <div class="m-info">
          <div class="intro">
            <h2>日本制造 隅田川意式手冲特浓挂耳咖啡</h2>
            <div class="text">
              <span>匠心之作 微苦醇香 </span>
              <a href="#" class="fs-14">
                查看评价
                <i class="iconfont">&#xe621;</i>
              </a>
            </div>

          </div>
          <div class="m-limitedPrice">
            <span class="content">特价</span>
            <span class="countdown">距优惠结束3天09时09分</span>
          </div>
          <div class="price">
            <div class="flex title">
              <span class="fz">活动价</span>
              <span>¥29.9</span>
              <span>¥39.9</span>
            </div>
            <div class="flex canClick">
              <span class="fz"></span>
              <span>
                天天免邮Pro会员立享免邮，到手价28.41
              </span>
            </div>
            <div class="flex sale">
              <span class="fz">促销</span>
              <span>打骨折</span>
            </div>
            <div class="flex m-feedbackBonus">
              <span class="fz">购物返</span>
              <span>最高返2积分</span>
            </div>
            <div class="flex pointInfo">
              <span class="fz">限制</span>
              <span>特价商品不可与优惠券叠加使用</span>
            </div>
            <div class="flex freightText">
              <span class="fz">邮费</span>
              <a href="#">满99元免邮</a>
            </div>
            <div class="flex delivery">
              <span class="fz">配送</span>
              <span>湖南长沙</span>
            </div>
            <hr>
            <div class="flex policyBox">
              <span class="fz">服务</span>
              <a href="#">
                <span>网易严选自营 > </span>
                <span>不支持无忧退换 > </span>
                <span>不可用券 > </span>
                <span>国内部分地区不可配送</span>
              </a>
            </div>
          </div>
          <div class="specProp">
            <span class="fz">规格</span>
            <ul>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="count">
            <span class="fz">数量</span>
            <div class="u-selnum">
              <span class="sub">-</span>
              <input type="text" value="1">
              <span class="sup">+</span>
            </div>
          </div>
          <div class="btn">
            <a href="javascript:" class="submit">立即购买</a>
            <a href="javascript:" class="addCart">加入购物车</a>
            <a href="javascript:">收藏</a>
            <a href="javascript:">下载严选APP</a>
          </div>
        </div>
      </div>


    </div>
  </div>

  <!-- 商品详情下的轮播图 -->
  <div class="m-promContainer center">
    <div class="w-promHd">
      <h3>你可能还喜欢</h3>
    </div>
    <div class="promList">
      <ul>
        <li>
          <div class="hd">
            <a href="#">
              <img class="img_scale" src="./images/detail_list.png  " alt="">
            </a>
          </div>
          <div class="bd">
            <div class="tags">每日抄底</div>
            <h4 class="name">印尼林东曼特宁 深烘精品挂耳咖啡 10袋</h4>
            <div class="price">
              <span>¥52</span>
              <a href="#">购买</a>
            </div>
          </div>
        </li>
        <li>
          <div class="hd">
            <a href="#">
              <img class="img_scale" src="./images/detail_list.png  " alt="">
            </a>
          </div>
          <div class="bd">
            <div class="tags">每日抄底</div>
            <h4 class="name">印尼林东曼特宁 深烘精品挂耳咖啡 10袋</h4>
            <div class="price">
              <span>¥52</span>
              <a href="#">购买</a>
            </div>
          </div>
        </li>
        <li>
          <div class="hd">
            <a href="#">
              <img class="img_scale" src="./images/detail_list.png  " alt="">
            </a>
          </div>
          <div class="bd">
            <div class="tags">每日抄底</div>
            <h4 class="name">印尼林东曼特宁 深烘精品挂耳咖啡 10袋</h4>
            <div class="price">
              <span>¥52</span>
              <a href="#">购买</a>
            </div>
          </div>
        </li>
        <li>
          <div class="hd">
            <a href="#">
              <img class="img_scale" src="./images/detail_list.png  " alt="">
            </a>
          </div>
          <div class="bd">
            <div class="tags">每日抄底</div>
            <h4 class="name">印尼林东曼特宁 深烘精品挂耳咖啡 10袋</h4>
            <div class="price">
              <span>¥52</span>
              <a href="#">购买</a>
            </div>
          </div>
        </li>
      </ul>
      <div class="prev">
        < </div>
          <div class="next"> > </div>
      </div>
    </div>
  </div>

  <!-- 商品详情 -->
  <div class="detailBd">
    <div class="center">
      <div class="left">
        <div class="detailNavTab">
          <ul>
            <li>详情</li>
            <li>评价</li>
            <li>常见问题</li>
            </li>
          </ul>
        </div>
        <div class="tabContent">
          <ul>
            <li>
              <span>包装</span>
              <span>盒装</span>
              <span>种类</span>
              <span>挂耳咖啡</span>
            </li>
            <li>
              <span>产地</span>
              <span>日本</span>
              <span>保质期</span>
              <span>18个月</span>
            </li>
            <li>
              <span>适用场景</span>
              <span>代餐、日常、聚会、早餐、熬夜/加班</span>
              <span></span>
              <span></span>
            </li>
            <li>
              <span>贮藏方法</span>
              <span>避免高温、潮湿，常温保存</span>
              <span>配料</span>
              <span>黑咖啡粉</span></span>
            </li>
            <li>
              <span>温馨提示</span>
              <span>网易严选出售的食品，除明确质量问题外均不接受退换货</span>
              <span></span>
              <span></span>
            </li>
          </ul>
          <div class="img">
            <p><img src="./images/detail_list1.png" alt=""></p>
            <p><img src="./images/detail_list1.png" alt=""></p>
            <p><img src="./images/detail_list1.png" alt=""></p>
            <p><img src="./images/detail_list1.png" alt=""></p>
            <p><img src="./images/detail_list1.png" alt=""></p>
            <p><img src="./images/detail_list1.png" alt=""></p>
            <p><img src="./images/detail_list1.png" alt=""></p>
            <p><img src="./images/detail_list1.png" alt=""></p>
          </div>
        </div>
      </div>
      <div class="right">
        <header>24小时热销榜</header>
        <div class="bd">
          <ul>
            <li>
              <div class="hd-img">
                <a href="#"><img src="./images/detail_img.png" alt=""></a>
              </div>
              <div class="bd-content">
                <a href="#" class="name">新装上市，专属牧场纯牛奶 250毫升*24盒 </a>
                <span class="price">¥88</span>
              </div>
            </li>
            <li>
              <div class="hd-img">
                <a href="#"><img src="./images/detail_img.png" alt=""></a>
              </div>
              <div class="bd-content">
                <a href="#" class="name">新装上市，专属牧场纯牛奶 250毫升*24盒 </a>
                <span class="price">¥88</span>
              </div>
            </li>
            <li>
              <div class="hd-img">
                <a href="#"><img src="./images/detail_img.png" alt=""></a>
              </div>
              <div class="bd-content">
                <a href="#" class="name">新装上市，专属牧场纯牛奶 250毫升*24盒 </a>
                <span class="price">¥88</span>
              </div>
            </li>
            <li>
              <div class="hd-img">
                <a href="#"><img src="./images/detail_img.png" alt=""></a>
              </div>
              <div class="bd-content">
                <a href="#" class="name">新装上市，专属牧场纯牛奶 250毫升*24盒 </a>
                <span class="price">¥88</span>
              </div>
            </li>



          </ul>
        </div>
      </div>
    </div>
  </div>


  <!-- 底部 -->
  <footer>
    <div class="center">
      <div class="yx-cp-m-ft1">
        <div class="yx-cp-item">
          <h4>客服服务</h4>
          <div class="btn">
            <a href="#">
              <i></i>
              <span>在线客服</span>
            </a>
            <a href="#">
              <i></i>
              <span>用户反馈</span>
            </a>
          </div>
        </div>
        <div class="yx-cp-item">
          <h4>何为网易严选</h4>
          <p>
            网易严选是深受新中产喜爱的生活方式品牌, 为消费者提供一站式、全品类、全方位的美好生活解决方案。我们通过简约、实用、舒适的美学设计, 不断带来高品质灵感好物, 陪伴3000万新中产用户「活出自己喜欢的样子」,
            共同倡导多元化的生活价值主张——每个人都可以把生活的选择权交还给自己。
          </p>
          <div class="ewm">
            <span>关注我们 :</span>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="yx-cp-item">
          <h4>扫码下载严选App</h4>
          <div><a href="#"><img src="./images/app.png" alt=""></a></div>
          <p>下载领大额新人红包</p>
        </div>
      </div>
      <!-- 还有一个底部,不打算做了,没意义. 为什么提交不了-->
      <div class="yx-cp-m-ft2"></div>
    </div>
  </footer>

  <script src="./js/libs/jquery.js"></script>
  <script src="./layui/layui.js"></script>
  <script src="./js/detail.js"></script>
  <script src="./js/common.js"></script>
</body>

</html>